<!--
 * @Author: your name
 * @Date: 2022-01-06 11:04:13
 * @LastEditTime: 2022-01-08 20:05:59
 * @LastEditors: Please set LastEditors
 * @Description: 地产详细
 * @FilePath: \homepage\src\views\detail\index.vue\
-->

<template>
  <div>
    <Header />
    <el-main>
      <el-row :gutter="20">
        <el-col :span="12" :offset="6">
          <div class="container">
            <div class="top">
              <i class="el-icon-s-marketing icon"></i>
              <span>地产详情</span>
            </div>
            <div class="content">
              <el-card class="box-card">
                <span style="">{{ data.title }} </span>
                <div class="pic">
                  <div class="picLeft">
                    <img
                      class="imgLeft"
                      :src="data.image"
                      v-fiximg="require('@/assets/dichang2.png')"
                      alt=""
                      height="430px"
                    />
                  </div>
                  <div class="picRight">
                    <img
                      :src="item"
                      alt=""
                      v-for="(item, index) in data.photos"
                      v-fiximg="require('@/assets/dichang1.png')"
                      :key="index"
                      style="width: 100px"
                    />
                    <p class="price">{{ data.price }}<span>元</span></p>
                    <el-card class="box-card" shadow="always">
                      <MapContainer />
                    </el-card>
                  </div>
                </div>
                <div class="content">
                  {{ data.desc }}
                  <p v-show="data.tags">
                    住房优势:<span
                      v-for="(item, index) in data.tags"
                      :key="index"
                      >{{ item }}</span
                    >
                  </p>
                </div>
              </el-card>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-main>
    <Footer />
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import MapContainer from "@/components/MapContainer";
import { properties } from "@/api/detail";

export default {
  data() {
    return {
      map: null,
      id: 0, // 谁点击的id
      data: {}, // 请求回来的内容
      dataImg: [], //请求回来的图片
    };
  },
  components: {
    MapContainer,
  },
  async created() {
    this.id = this.$route.params.id;
    console.log("this.id: ", this.id);
    const { data } = await properties(this.id);
    console.log("data: ", data);
    this.data = data;
    // 判断长度是否为4  不为4的话就加到4
    if (data.photos.length < 4) {
      for (let i = data.photos.length; i < 4; i++) {
        data.photos[i] = data.photos[0];
      }
    }
    this.dataImg = data.photos;
  },

  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap();
  },
  methods: {
    setup() {
      const map = shallowRef(null);
      return {
        map,
      };
    },
    initMap() {
      AMapLoader.load({
        key: "f5fe219c4a3f37b3ccebf6afb0b75fc7", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [""], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 5, //初始化地图级别
            center: [113.368888, 23.145335], //初始化地图中心点位置
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>


<style lang="less" scoped>
.el-header {
  padding: 0;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.container {
  #container {
    padding: 11px;
    margin: -20px;
    width: 188px;
    height: 120px;
  }
  .top {
    color: #e8ad3f;
    margin-bottom: 10px;
    span {
      font-size: 20px;
    }
    .icon {
      margin-right: 10px;
      font-size: 20px;
    }
  }
  .content {
    /deep/.box-card {
      padding: 0;
      margin: 0;
      span {
        font-size: 18px;
        font-weight: 700;
      }
    }
    .pic {
      display: flex;
      .imgLeft {
        margin-top: 10px;
        width: 600px;
        // height: 500px;
      }
      .picRight {
        justify-content: space-around;
        margin: 10px 0px 20px 50px;
        padding: 0px;
        img {
          margin-right: 10px;
          margin-bottom: 10px;
          width: 100px;
          height: 100px;
        }
        .price {
          text-align: center;
          color: #e8ad3f;
          font-size: 18px;
        }
      }
      .box-card {
        width: 210px;
        height: 140px;
        // margin-top: 20px;
      }
    }
    .cont {
      height: 100px;
      border: 1px solid rgb(245, 231, 231);
    }
  }
}
</style>